import { defineStore } from 'pinia'
// @ts-ignore-next-line
import type { AppConfigState, LayoutType } from '../../types/appConfigUser'
import { getLightColor, getDarkColor } from '@/utils/theme'
import { ElMessage } from 'element-plus'
import piniaPersistConfig from '@/utils/piniaPersist'
import { EnumLocalStorageKey } from '@/enums/localStorage'
/**这些配置是跟用户相关的，会存到localStorage */
const useAppConfigUserStore = defineStore('appConfig-user', {
  state: (): AppConfigState => ({
    themeConfig: {
      isDark: false,
      isGrey: false,
      isWeak: false,
      primaryColor: '#409eff'
    },
    layoutConfig: {
      layout: 'classicLayout',
      collapseSideMenu: true,
      showBreadcrumb: true,
      showBreadcrumbIcon: true,
      showTabs: true,
      showTabsIcon: true
    }
  }),

  actions: {
    // 切换暗黑模式
    switchDark(value?: boolean) {
      const body = document.documentElement as HTMLElement
      if (typeof value == 'boolean') this.themeConfig.isDark = value
      if (this.themeConfig.isDark || value) body.setAttribute('class', 'dark')
      else body.setAttribute('class', '')
    },

    // 修改主题颜色
    changePrimary(val: string) {
      if (!val) {
        ElMessage({
          type: 'success',
          message: `${val}`
        })
      }
      this.themeConfig.primaryColor = val
      document.documentElement.style.setProperty('--el-color-primary', val)
      // 颜色加深
      document.documentElement.style.setProperty(
        '--el-color-primary-dark-2',
        `${getDarkColor(val, 0.1)}`
      ) //没有把所有dark颜色都改了是因为在主题色切换的时候可以使用一些原来的变量
      // for (let i = 1; i <= 9; i++){
      //   document.documentElement.style.setProperty(
      //     `--el-color-primary-dark-${i}`,
      //     `${getDarkColor(val, i/10)}`
      //   );
      // }

      // 颜色变浅
      for (let i = 1; i <= 9; i++) {
        document.documentElement.style.setProperty(
          `--el-color-primary-light-${i}`,
          `${getLightColor(val, i / 10)}`
        )
      }
    },

    // 灰色和弱色切换
    changeGreyOrWeak(value: boolean, type?: string) {
      const body = document.body as HTMLElement
      if (!value) {
        body.setAttribute('style', '')
        this.themeConfig.isGrey = false
        this.themeConfig.isWeak = false
        return
      }
      if (type === 'grey') body.setAttribute('style', 'filter: grayscale(1)')
      if (type === 'weak') body.setAttribute('style', 'filter: invert(80%)')
      const propName = type == 'grey' ? 'isWeak' : 'isGrey'
      this.themeConfig[propName] = false
    },

    toggleSideMenu() {
      this.layoutConfig.collapseSideMenu = !this.layoutConfig.collapseSideMenu
    },
    setSideMenu(value: boolean) {
      this.layoutConfig.collapseSideMenu = value
    },

    setLayout(value: LayoutType) {
      this.layoutConfig.layout = value
    },

    resetStore() {
      this.switchDark(false)
      this.changePrimary('#409eff')
      this.changeGreyOrWeak(false)
      this.$patch(state => {
        state.layoutConfig.layout = 'classicLayout'
        state.layoutConfig.collapseSideMenu = true
        state.layoutConfig.showBreadcrumb = true
        state.layoutConfig.showTabs = true
        state.layoutConfig.showTabsIcon = true
        state.layoutConfig.showBreadcrumbIcon = true
      })
    }
  },
  persist: piniaPersistConfig(EnumLocalStorageKey.AppConfigUser)
})

export default useAppConfigUserStore
